<template>
	<view>
		<!-- 1  两张图片并排 图片坐文案右 -->
		<view
			v-if="mode === 1"
			class="goods-xs-box ss-flex ss-flex-wrap"
			 
		>
			<view
				class="goods-xs-list"
				v-for="item in goodsList"
				:key="item.id"
				:style="[
					{
						padding: data.space + 'rpx',
					},
				]"
			>
				<s-goods-column
					class="goods-card"
					size="xs"
					:goodsFields="goodsFields"
					:tagStyle="tagStyle"
					:data="item"
					:titleColor="goodsFields.title?.color"
					:topRadius="data.borderRadiusTop"
					:bottomRadius="data.borderRadiusBottom"
					:titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
					@click="$router.go('/pages/goods/index', { id: item.id })"
				></s-goods-column>
			</view>
		</view>
		<!-- 2  三张商品卡片并排 图片上文案下 -->
		<view
			v-if="mode === 2"
			class="goods-sm-box ss-flex ss-flex-wrap"
			:style="[{ margin: '-' + data.space + 'rpx' }]"
		>
			<view
				v-for="item in goodsList"
				:key="item.id"
				class="goods-card-box"
				:style="[
					{
						padding: data.space + 'rpx',
					},
				]"
			>
				<s-goods-column
					class="goods-card"
					size="sm"
					:goodsFields="goodsFields"
					:tagStyle="tagStyle"
					:data="item"
					:titleColor="goodsFields.title?.color"
					:topRadius="data.borderRadiusTop"
					:bottomRadius="data.borderRadiusBottom"
					@click="$router.go('/pages/goods/index', { id: item.id })"
				></s-goods-column>
			</view>
		</view>

		<!-- 3 商品卡片并排 轮播 -->
		<view v-if="mode === 3" class="">
			<scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
				<view class="goods-box ss-flex">
					<view
						class="goods-card-box"
						v-for="item in goodsList"
						:key="item.id"
						:style="[{ marginRight: data.space * 2 + 'rpx' }]"
					>
						<s-goods-column
							class="goods-card"
							size="sm"
							:goodsFields="goodsFields"
							:tagStyle="tagStyle"
							:data="item"
							:titleColor="goodsFields.title?.color"
							:titleWidth="
								(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3
							"
							@click="$router.go('/pages/goods/index', { id: item.id })"
						></s-goods-column>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 商品栏s-goods-column
	 *
	 * @description style 1:横向两个，左图右内容 2：横向三个，上图下内容 3：左右滚动
	 */
	import { onMounted, ref } from 'vue';
	import $router from '/shop/router/index.js';
	import $goods from '/shop/api/goods.js';
	import _ from 'lodash'

	const props = defineProps({
		data: {
			type: Object,
			default() {},
		},
		styles: {
			type: Object,
			default() {},
		},
	});
	const { mode, tagStyle, buyNowStyle, goodsFields, } = props.data;
	let { marginLeft, marginRight } = props.styles;
	const goodsList = ref([]);
	onMounted(async () => {
		if (props.data.goodsList.length > 0) {
			
			console.log("items: ", props.data.goodsList)
			let goodsIds = _.map(props.data.goodsList,convertIds)
			console.log("goodsIds: ", goodsIds);
			
			let { data } = await $goods.ids({ ids: goodsIds });
			goodsList.value = data;
		}
	});
	
	const convertIds = (item) => {
		return item.id
	}
</script>

<style lang="scss" scoped>
	.goods-xs-box {
		// margin: 0 auto;
		width: 100%;
		.goods-xs-list {
			box-sizing: border-box;
			flex-shrink: 0;
			overflow: hidden;
			width: 50%;
		}
	}

	.goods-sm-box {
		margin: 0 auto;
		box-sizing: border-box;
		.goods-card-box {
			flex-shrink: 0;
			overflow: hidden;
			width: 33.3%;
			box-sizing: border-box;
		}
	}
	.goods-scroll-box {
		margin: 0 auto;
		width: 100%;
		box-sizing: border-box;
	}
</style>
